<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>线条</title>
  </head>
  <body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      ctx.beginPath(); // 开始绘制路径
      ctx.lineWidth = 2; // 线条宽度(以最后为基准)
      ctx.strokeStyle = "blue"; // 线条填充色
      ctx.moveTo(100, 100); // 起点坐标
      ctx.lineTo(250, 75); // 中间点坐标
      ctx.stroke(); // 绘制线段
      ctx.lineWidth = 1; // 线条宽度(只能由宽变窄)
      ctx.lineTo(300, 100); // 终点坐标
      ctx.stroke(); // 绘制线段
    </script>
  </body>
</html>
